<template>
  <div class="main-container" id="main-container">
    <div style="background: #fff; height: 100%" id="proofing">
      <pageTabelLayout>
        <template #pageHeader>
          <div class="my-header" style="padding-top: 16px; padding-left: 10px" v-if="headerShow">
            <div class="search-form">
              <a-form size="small" :model="searchData" auto-label-width layout="inline">
                    <a-form-item label="打样日期"  label-col-flex="70px"  :style="{width:'320px'}"> 
                      <!-- <a-date-picker  popup-container="html"  class="bacClass" v-model="searchData.proofingDate" />  -->
                      <a-range-picker  popup-container="html"  class="bacClass" @change="selectDate" :style="{padding:'0',width:'100%'}" />
                    </a-form-item>
                  
                    <a-form-item label="客户名称"  label-col-flex="70px"  :style="{width:'320px'}"> 
                      <a-input class="bacClass" allow-clear v-model="searchData.clientName" :style="{width:'100%'}"/>
                    </a-form-item>
                  
                    <a-form-item label="打样员"  label-col-flex="70px"  :style="{width:'320px'}"> 
                      <a-input class="bacClass" v-model="searchData.prooferOperator" allow-clear :style="{width:'100%'}"/>
                    </a-form-item>
                  
                    <a-form-item label="布号"  label-col-flex="70px"  :style="{width:'320px'}"> 
                      <a-input class="bacClass" allow-clear v-model="searchData.clothNo" :style="{width:'100%'}"/>
                    </a-form-item>

                    <a-form-item label="品名"  label-col-flex="70px"  :style="{width:'320px'}"> 
                      <a-input class="bacClass" allow-clear v-model="searchData.descriptionName" :style="{width:'100%'}"/>
                    </a-form-item>
                  
                    <a-form-item label="打样时间"  label-col-flex="70px"  :style="{width:'320px'}"  >
                      <a-select popup-container="html"  class="bacClass" allow-clear v-model="searchData.proofingTime" :style="{width:'100%'}">
                        <a-option :value="''">全部</a-option>
                        <a-option :value="0">准时</a-option>
                        <a-option :value="1">延期</a-option>
                      </a-select>
                    </a-form-item>
                  
                    <a-form-item  :style="{width:'330px'}">
                      <a-button style="border: 1px solid red" @click="clickOut">封卡</a-button>
                      <a-checkbox @change="searchData.rummage = $event ? 1 : 0">翻打</a-checkbox>
                      <a-checkbox @change="searchData.sealCard = $event ? 1 : 0">未封卡</a-checkbox>
                    </a-form-item>
               
              </a-form>
            </div>
          </div>
          <div class="my-divisders">
            <a-divider orientation="center">
              <icon-double-up
                v-if="headerShow"
                @click="changHeadShow(false)"
                :strokeWidth="2"
                :size="18"
              />
              <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
            </a-divider>
          </div>
          <div class="my-tool-bar" style="padding: 10px">
            <Toolbar
              :items="['查询', '新增', '打印']"
              @select="selectHandler"
              @add="addHandler"
              @dyBoufei="dyBoufeiHandler"
            />
          </div>
        </template>
        <template #pageTabel>
          <AgGridVuesCopys
            :rowHeight="33"
            :headerHeight="33"
            rowSelection="multiple"
            @grid-ready="gridReady"
            style="height: 100%"
            class="ag-theme-alpine"
            :defaultColDef="defaultColDef"
            :rowData="table.dataList"
            :columnDefs="cfsValue"
            :localeText="localeTextData"
            :suppressRowClickSelection="true"
          />
        </template>
        <paginationCopys
          :total="total"
          show-total
          show-jumper
          show-page-size
          @change="changePage"
          @page-size-change="changeSize"
          style="justify-content: center"
          :page-size="pagination.pageSize"
          :current="pagination.page"
        />
        <a-drawer
          :drawer-style="{ zIndex: 9999 }"
          height="100%"
          unmountOnClose
          :visible="pageData.showAdd"
          :mask-closable="false"
          placement="bottom"
          @cancel="pageData.showAdd = false"
        >
          <template #title>
            <a-row style="width: 100%; justify-content: space-between; box-sizing: border-box">
              <a-col flex="100px"> {{ pageData.sideTitle }}</a-col>
            </a-row>
          </template>
          <a-scrollbar
            style="height: calc(100% - 50px); overflow-y: scroll; width: 100%; overflow-x: hidden"
          >
            <ProofMana :data-form="dataForm" />
          </a-scrollbar>
          <template #footer>
            <a-button size="mini" @click="pageData.showAdd = false"> 关闭 </a-button>
            <a-button type="primary" size="mini" @click="saveHandler"> 保存 </a-button>
            <a-button
              type="primary"
              status="warning"
              size="mini"
              @click="dyBoufeiHandler"
              v-if="dataForm.id"
            >
              打印
            </a-button>
          </template>
        </a-drawer>

        <a-drawer
          :drawer-style="{ zIndex: 9999 }"
          height="100%"
          :visible="pageData.showPrint"
          :mask-closable="false"
          placement="bottom"
          @cancel="pageData.showPrint = false"
        >
          <template #title>
            <a-row style="width: 100%; box-sizing: border-box">
              <a-col flex="100px"> 打印预览 </a-col>
            </a-row>
          </template>
          <div id="printCont" class="printCont">
            <h3 class="Head3">肇庆市粤隆纺织有限公司</h3>
            <div class="secondTitle">
              <div style="flex: 1; text-align: right">布办染料成本表</div>
              <div style="flex: 0.9; text-align: right"
                >日期: {{ pageData.printData.printDate }}</div
              >
            </div>
            <div class="headTop">
              <table class="mytable">
                <thead>
                  <tr>
                    <th>客户</th>
                    <th>布种</th>
                    <th>本厂色号</th>
                    <th>颜色深浅</th>
                    <th>前处理</th>
                    <th>染料配方</th>
                    <th>分量</th>
                    <th>元/公斤</th>
                    <th>色样</th>
                    <th>意见</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in pageData.printData.pf" :key="index">
                    <template v-if="index === 0">
                      <td :rowspan="pageData.printData.pf.length"
                        >{{ pageData.printData.clientName }}
                      </td>
                      <td :rowspan="pageData.printData.pf.length"
                        >{{ pageData.printData.clothNo }}
                      </td>
                      <td :rowspan="3">{{ pageData.printData.colourNumber }}</td>
                      <td :rowspan="pageData.printData.pf.length"
                        >{{ pageData.printData.colourDepth }}
                      </td>
                      <td :rowspan="pageData.printData.pf.length"
                        >{{ pageData.printData.dispose }}
                      </td>
                    </template>
                    <td v-if="index === 3">客户色号</td>
                    <td v-if="index === 4" :rowspan="pageData.printData.pf.length - 4">{{
                      pageData.printData.clientColour
                    }}</td>
                    <td>{{ item.effectsName }}</td>
                    <td>{{ item.concentration }}</td>
                    <template v-if="index === 0">
                      <td :rowspan="pageData.printData.pf.length"></td>
                      <td :rowspan="pageData.printData.pf.length"></td>
                      <td :rowspan="pageData.printData.pf.length">{{
                        pageData.printData.clientOpinion
                      }}</td>
                    </template>
                  </tr>
                  <tr>
                    <td colspan="5">备注：{{ pageData.printData.remark }}</td>
                    <td colspan="2">染料总分量: {{ pageData.printData.allconcen }}</td>
                    <td colspan="3"></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <template #footer>
            <div style="text-align: center"
              ><a-button @click="pageData.showPrint = false">关闭</a-button>
              <a-button @click="vPrintClick" style="margin-left: 20px" type="primary"
                >打印</a-button
              >
            </div>
          </template>
        </a-drawer>
      </pageTabelLayout>
    </div>
  </div>
</template>

<script lang="ts">
  import { post, get } from '@/api/http'
  import { defineComponent, reactive, ref, onMounted } from 'vue'
  import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
  } from '@/hooks/table'
  import { proofMgt } from '@/api/laboratory'
  import { FormInstance, Message } from '@arco-design/web-vue'
  
  import { localeText } from '@/api/aggridZw'
  import ProofMana from '@/components/Laboratory/ProofMana.vue'
  import emitter from '@/hooks/useEventBus'
  import printJS from 'print-js'
  import dayjs from 'dayjs'
  export default defineComponent({
    name: 'proofing-management',
    components: { ProofMana },
    setup() {
      onMounted(() => {
        // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
        doRefresh()
      })
      const searchData = reactive<{
        proofingDate: string
        clientName: string
        prooferOperator: string
        clothNo: string
        descriptionName: string
        startDate: string
        endDate: string
        sealCard: number
        rummage: number
        proofingTime: number
      }>({
        proofingDate: '',
        clientName: '',
        prooferOperator: '',
        clothNo: '',
        descriptionName: '',
        startDate: '',
        endDate: '',
        sealCard: 0,
        rummage: 0,
        proofingTime: 0,
      })
      const proofMgtApi = proofMgt()
      const headerShow = ref<boolean>(true)
      let changHeadShow = (boolVal: boolean) => {
        headerShow.value = boolVal
        emitter.emit('window-change')
      }

      const selectHandler = () => {
        pagination.page = 1
        doRefresh()
      }
      const addHandler = () => {
        pageData.showAdd = true
        pageData.sideTitle = '新增打样管理'
        for (var key in dataForm) {
          if (key === 'id') {
            dataForm[key] = null
          } else if (!Array.isArray(dataForm[key])) {
            dataForm[key] = ''
          } else {
            dataForm.battledoreCraftList = []
            dataForm.battledoreMessageTwoList = []
            dataForm.clientsRequirementList = []
            dataForm.marketingMessageList = []
            dataForm.fastnessMessageList = []
            dataForm.overthrowMessageList = []
          }
        }
      }

      const dyBoufeiHandler = async () => {
        //
        let proofingOdd = null
        let vals = gridOption.value.getSelectedRows().map((v: any) => {
          return v.proofingOdd
        })
        if (vals && vals.length > 0) {
          proofingOdd = vals[0]
        } else if (dataForm.id) {
          proofingOdd = dataForm.proofingOdd
        }
        await proofMgtApi.getPrintProof({ proofingOdd }).then((res: any) => {
          if (res.code === 200) {
            console.log(res.data)
            if (res.data.length > 0) {
              let newPf = res.data[0].TWO
              let pf: any[] = []
              newPf.forEach((v: any) => {
                pf = [...v.ONE, ...pf]
              })
              console.log(pf)
              if (pf.length < 7) {
                let len = 7 - pf.length
                for (let i = 0; i < len; i++) {
                  pf.push({ i })
                }
              }
              let allconcen = 0
              pf.forEach((v: any) => {
                allconcen += v.concentration ? parseInt(v.concentration) : 0
              })
              pageData.printData = res.data[0]
              pageData.printData.pf = pf
              pageData.printData.allconcen = allconcen
              pageData.printData.printDate = dayjs(new Date()).format('YYYY-MM-DD')
            }
            pageData.showPrint = true
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            })
          }
        })
      }
      async function doRefresh() {
        pageData.pageLoading = true
        await proofMgtApi
          .getProofMgtList({
            page: pagination.page,
            size: pagination.pageSize,
            ...searchData,
          })
          .then((res) => {
            if (res.code === 200) {
              table.handleSuccess(res.data.list)
              gridOption.value.setRowData(res.data.list)
              total.value = res.data.total
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }

      const formRef = ref<FormInstance>()

      const editHandler = async (data: any) => {
        // console.log(data);
        await proofMgtApi.getByidQueryProofMgtList({ id: data.id }).then((res) => {
          if (res.code === 200) {
            // console.log(res.data);
            let resData = res.data
            for (let key in resData.incomingCheckout) {
              dataForm[key] = resData.incomingCheckout[key]
            }
            resData.battledoreMessageTwos.forEach((v: any, index: any) => {
              v.rowIndex = index + 1
              v.battledoreMessageOneList = v.battledoreMessageOnes
            })
            dataForm.battledoreCraftList = resData.battledoreCrafts
            dataForm.battledoreMessageTwoList = resData.battledoreMessageTwos
            dataForm.clientsRequirementList = resData.clientsRequirements
            dataForm.marketingMessageList = resData.marketingMessages
            dataForm.fastnessMessageList = resData.fastnessMessages
            dataForm.overthrowMessageList = resData.overthrowMessages
            pageData.showAdd = true
            pageData.sideTitle = '编辑打样管理'
          }
        })
      }
      const clickOut = () => {
        if (gridOption.value.getSelectedRows().length === 0) {
          Message.error('请先勾选！')
          return
        }
        if (gridOption.value.getSelectedRows().length > 1) {
          Message.error('只能勾选一条！')
          return
        }
        if (gridOption.value.getSelectedRows()[0].sealDate == '') {
          gridOption.value.getSelectedRows()[0].sealDate = dayjs(new Date()).format('YYYY-MM-DD')
          // console.log(gridOption.value.getSelectedRows()[0].sealDate, '1')
        } else {
          gridOption.value.getSelectedRows()[0].sealDate = ''
          // console.log(gridOption.value.getSelectedRows()[0].sealDate, '2')
        }
        // console.log(gridOption.value.getSelectedRows()[0].sealDate, '3')
        post({
          url: 'pdm/proofingManage/updateInfo',
          data: gridOption.value.getSelectedRows(),
        }).then(({ code, data, message }: any) => {
          if (code === 200) {
            Message.success({
              content: '封卡成功',
              duration: 5000,
            })
            pagination.page = 1
            doRefresh()
          } else {
            Message.error({
              content: '封卡失败',
              duration: 5000,
            })
          }
        })
      }
      const dataForm = reactive<any>({})
      const saveHandler = () => {
        emitter.emit('saveHandler', async (status: boolean, dataForm: any) => {
          // console.log(status);
          if (status) {
            await proofMgtApi
              .operProofMgt({ ...dataForm })
              .then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()
                  pageData.showAdd = false
                  if (dataForm.id) {
                    Message.success({
                      content: '修改成功',
                      duration: 5000,
                    })
                  } else {
                    Message.success({
                      content: '新增成功',
                      duration: 5000,
                    })
                  }
                  doRefresh()
                } else {
                  Message.error({
                    content: res.message || '操作失败',
                    duration: 5000,
                  })
                  if (dataForm.id) {
                    dataForm.battledoreCraftList.forEach((v: any, index: any) => {
                      v.rowIndex = index + 1
                    })
                  }
                }
              })
              .catch((res) => {
                console.log(res)
              })
          }
        })
      }

      const { selectedRowKeys } = useRowSelection()
      const pagination = usePagination(doRefresh)

      const pageData = reactive<{
        showAdd: boolean
        sideTitle: string
        pageLoading: boolean
        dropDownData: any
        theight: number
        tablediv: any
        showPrint: boolean
        rHeight: number | undefined
        printData: any
      }>({
        showPrint: false,
        showAdd: false,
        sideTitle: '新增打样管理',
        dropDownData: '',
        pageLoading: false,
        theight: 0,
        tablediv: null,
        rHeight: 0,
        printData: {},
      })

      const table = useTable()
      const rowKey = useRowKey('id')
      const scrollbar = ref(true)
      const tableColumns = useTableColumn([
        {
          title: '打样单号',
          key: 'proofingOdd',
          dataIndex: 'proofingOdd',
          slotName: 'proofingOdd',
          width: 150,
          fixed: 'left',
        },
        {
          title: '色号',
          key: 'colourNumber',
          dataIndex: 'colourNumber',
          slotName: 'colourNumber',
          width: 150,
        },
        {
          title: '色称',
          key: 'colorAnomia',
          dataIndex: 'colorAnomia',
          slotName: 'colorAnomia',
          width: 150,
        },
        {
          title: '色类',
          key: 'colorclass',
          dataIndex: 'colorclass',
          slotName: 'colorclass',
          width: 150,
        },
        {
          title: '打样员',
          key: 'prooferOperator',
          dataIndex: 'prooferOperator',
          slotName: 'prooferOperator',
          width: 150,
        },
        {
          title: '是否翻打',
          key: 'rummage',
          slotName: 'rummage',
          width: 150,
        },
        // {
        //     title: '复样日期',
        //     key: 'makeDate',
        //     dataIndex: 'makeDate',
        //     width: 150,
        // },
        {
          title: '布号',
          key: 'clothNo',
          dataIndex: 'clothNo',
          slotName: 'clothNo',
          width: 150,
        },
        {
          title: '品名',
          key: 'descriptionName',
          dataIndex: 'descriptionName',
          slotName: 'descriptionName',
          width: 150,
        },
        {
          title: '颜色深浅',
          key: 'colourDepth',
          dataIndex: 'colourDepth',
          slotName: 'colourDepth',
          width: 150,
        },
        {
          title: '用坯深浅',
          key: 'wearDepth',
          dataIndex: 'wearDepth',
          slotName: 'wearDepth',
          width: 150,
        },
        {
          title: '用纱深浅',
          key: 'alkaliDepth',
          dataIndex: 'alkaliDepth',
          slotName: 'alkaliDepth',
          width: 150,
        },
        {
          title: '客来版编号',
          key: 'versionCode',
          dataIndex: 'versionCode',
          slotName: 'versionCode',
          width: 150,
        },
        {
          title: '合计成本',
          key: 'totalCost',
          dataIndex: 'totalCost',
          slotName: 'totalCost',
          width: 150,
        },
        {
          title: '客户色号',
          key: 'clientColour',
          dataIndex: 'clientColour',
          slotName: 'clientColour',
          width: 150,
        },
        {
          title: '客户确认',
          key: 'clientAffirm',
          dataIndex: 'clientAffirm',
          slotName: 'clientAffirm',
          width: 150,
        },
        {
          title: '客户意见',
          key: 'clientOpinion',
          dataIndex: 'clientOpinion',
          slotName: 'clientOpinion',
          width: 150,
        },
        {
          title: '对色光源',
          key: 'coloringLight',
          dataIndex: 'coloringLight',
          slotName: 'coloringLight',
          width: 150,
        },
        {
          title: '作业类型',
          key: 'jobType',
          dataIndex: 'jobType',
          slotName: 'jobType',
          width: 150,
        },
        {
          title: '交样日期',
          key: 'makeDate',
          dataIndex: 'makeDate',
          slotName: 'makeDate',
          width: 150,
        },
        {
          title: '来样日期',
          key: 'suppliedDate',
          dataIndex: 'suppliedDate',
          slotName: 'suppliedDate',
          width: 150,
        },
        {
          title: '不封卡',
          key: 'sealCard',
          slotName: 'sealCard',
          width: 150,
        },
        {
          title: '封样日期',
          key: 'sealDate',
          dataIndex: 'sealDate',
          slotName: 'sealDate',
          width: 150,
        },
        {
          title: '客户名称',
          key: 'clientName',
          dataIndex: 'clientName',
          slotName: 'clientName',
          width: 150,
        },
        {
          title: '客订名称',
          key: 'guestName',
          dataIndex: 'guestName',
          slotName: 'guestName',
          width: 150,
        },
        {
          title: '测试标准',
          key: 'testStandard',
          dataIndex: 'testStandard',
          slotName: 'testStandard',
          width: 150,
        },
        {
          title: '敏感色',
          key: 'sensitiveColor',
          dataIndex: 'sensitiveColor',
          slotName: 'sensitiveColor',
          width: 150,
        },
        {
          title: '特敏感色',
          key: 'sensitivityColor',
          dataIndex: 'sensitivityColor',
          slotName: 'sensitivityColor',
          width: 150,
        },
        {
          title: '拨印',
          key: 'dialPrinting',
          dataIndex: 'dialPrinting',
          slotName: 'dialPrinting',
          width: 150,
        },
        {
          title: '荧光料',
          key: 'fluorescent',
          dataIndex: 'fluorescent',
          slotName: 'dialPrinting',
          width: 150,
        },
        {
          title: '彩蓝料',
          key: 'blueMaterial',
          dataIndex: 'blueMaterial',
          slotName: 'blueMaterial',
          width: 150,
        },
        // {
        //     title: '复样员',
        //     key: 'colorNum',
        //     dataIndex: 'colorNum',
        //     width: 150,
        // },
      ])
      //表格方面
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
        //调整表格自适应大小
        // gridOption.value.sizeColumnsToFit();
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1,
        width: 150,
      }
      let cfsValue: any[] = tableColumns.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.dataIndex,
          pinned: o['fixed'],
        }
        if (o.slotName === 'proofingOdd') {
          obj['resizable'] = false
          obj['filter'] = true
          obj['sortable'] = true
          obj['lockPosition'] = 'left'
          obj['width'] = 150
          obj['cellRenderer'] = {
            template: `<a-link @click="a"><span :style="{'color': color}">{{proofingOdd}}</span></a-link>`,
            setup(props: any) {
              const a = () => {
                editHandler(props.params.data)
              }
              const proofingOdd = props.params.data.proofingOdd
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                a,
                proofingOdd,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'colourNumber') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{colourNumber}}</span>`,
            setup(props: any) {
              const colourNumber = props.params.data.colourNumber
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                colourNumber,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'colorAnomia') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color}">{{colorAnomia}}</span>`,
            setup(props: any) {
              const colorAnomia = props.params.data.colorAnomia
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                colorAnomia,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'colorclass') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color}">{{colorclass}}</span>`,
            setup(props: any) {
              const colorclass = props.params.data.colorclass
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                colorclass,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'prooferOperator') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color':color}">{{proofingOdd}}</span>`,
            setup(props: any) {
              const prooferOperator = props.params.data.prooferOperator
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                prooferOperator,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'clothNo') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color}">{{clothNo}}</span>`,
            setup(props: any) {
              const clothNo = props.params.data.clothNo
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                clothNo,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'descriptionName') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color':  color,}">{{descriptionName}}</span>`,
            setup(props: any) {
              const descriptionName = props.params.data.descriptionName
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                descriptionName,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'colourDepth') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color':  color}">{{colourDepth}}</span>`,
            setup(props: any) {
              const colourDepth = props.params.data.colourDepth
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                colourDepth,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'wearDepth') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color}">{{wearDepth}}</span>`,
            setup(props: any) {
              const wearDepth = props.params.data.wearDepth
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                wearDepth,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'alkaliDepth') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{alkaliDepth}}</span>`,
            setup(props: any) {
              const alkaliDepth = props.params.data.alkaliDepth
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                alkaliDepth,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'versionCode') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color}">{{versionCode}}</span>`,
            setup(props: any) {
              const versionCode = props.params.data.versionCode
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                versionCode,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'totalCost') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color':color}">{{totalCost}}</span>`,
            setup(props: any) {
              const totalCost = props.params.data.totalCost
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                totalCost,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'clientColour') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color':color}">{{clientColour}}</span>`,
            setup(props: any) {
              const clientColour = props.params.data.clientColour
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                clientColour,
                clientAffirm,
                color,
              }
            },
          }
        }
        if (o.slotName === 'clientAffirm') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{clientAffirm}}</span>`,
            setup(props: any) {
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'clientOpinion') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{clientOpinion}}</span>`,
            setup(props: any) {
              const clientOpinion = props.params.data.clientOpinion
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                clientOpinion,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'coloringLight') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{coloringLight}}</span>`,
            setup(props: any) {
              const coloringLight = props.params.data.coloringLight
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                coloringLight,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'jobType') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{jobType}}</span>`,
            setup(props: any) {
              const jobType = props.params.data.jobType
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                jobType,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'makeDate') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{makeDate}}</span>`,
            setup(props: any) {
              const makeDate = props.params.data.makeDate
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                makeDate,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'suppliedDate') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{suppliedDate}}</span>`,
            setup(props: any) {
              const suppliedDate = props.params.data.suppliedDate
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                suppliedDate,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'sealDate') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{sealDate}}</span>`,
            setup(props: any) {
              const sealDate = props.params.data.sealDate
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                sealDate,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'clientName') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{clientName}}</span>`,
            setup(props: any) {
              const clientName = props.params.data.clientName
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                clientName,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'guestName') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{guestName}}</span>`,
            setup(props: any) {
              const guestName = props.params.data.guestName
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                guestName,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'testStandard') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{testStandard}}</span>`,
            setup(props: any) {
              const testStandard = props.params.data.testStandard
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                testStandard,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'sensitiveColor') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{sensitiveColor}}</span>`,
            setup(props: any) {
              const sensitiveColor = props.params.data.sensitiveColor
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                sensitiveColor,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'sensitivityColor') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{sensitivityColor}}</span>`,
            setup(props: any) {
              const sensitivityColor = props.params.data.sensitivityColor
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                sensitivityColor,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'dialPrinting') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{dialPrinting}}</span>`,
            setup(props: any) {
              const dialPrinting = props.params.data.dialPrinting
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                dialPrinting,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'fluorescent') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{fluorescent}}</span>`,
            setup(props: any) {
              const fluorescent = props.params.data.fluorescent
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                fluorescent,
                clientAffirm,
              }
            },
          }
        }
        if (o.slotName === 'blueMaterial') {
          obj['cellRenderer'] = {
            template: `<span :style="{'color': color }">{{blueMaterial}}</span>`,
            setup(props: any) {
              const blueMaterial = props.params.data.blueMaterial
              const clientAffirm = props.params.data.clientAffirm
              var color = clientAffirm == '' ? 'black' : 'red'
              return {
                color,
                blueMaterial,
                clientAffirm,
              }
            },
          }
        }

        if (o.slotName === 'sensitiveColor') {
          obj['cellRenderer'] = {
            template: `<a-space>
                    <a-checkbox  :value="1" 
                     :default-checked="checked" disabled :key="Math.random()"  />
                    </a-space>`,
            setup(props: any) {
              const { sensitiveColor } = props.params.data
              var checked = sensitiveColor > 0 ? true : false
              return {
                checked,
                sensitiveColor,
              }
            },
          }
        }
        if (o.slotName === 'sensitivityColor') {
          obj['cellRenderer'] = {
            template: `<a-space>
                    <a-checkbox  :value="1" 
                     :default-checked="checked" disabled :key="Math.random()"  />
                    </a-space>`,
            setup(props: any) {
              const { sensitivityColor } = props.params.data
              var checked = sensitivityColor > 0 ? true : false
              return {
                sensitivityColor,
                checked,
              }
            },
          }
        }
        if (o.slotName === 'dialPrinting') {
          obj['cellRenderer'] = {
            template: `<a-space>
                    <a-checkbox  :value="1" 
                     :default-checked="checked" disabled :key="Math.random()"  />
                    </a-space>`,
            setup(props: any) {
              const { dialPrinting } = props.params.data
              var checked = dialPrinting > 0 ? true : false
              return {
                dialPrinting,
                checked,
              }
            },
          }
        }
        if (o.slotName === 'fluorescent') {
          obj['cellRenderer'] = {
            template: `<a-space>
                    <a-checkbox  :value="1" 
                     :default-checked="checked" disabled :key="Math.random()"  />
                    </a-space>`,
            setup(props: any) {
              const { fluorescent } = props.params.data
              var checked = fluorescent > 0 ? true : false
              return {
                fluorescent,
                checked,
              }
            },
          }
        }
        if (o.slotName === 'blueMaterial') {
          obj['cellRenderer'] = {
            template: `<a-space>
                    <a-checkbox  :value="1" 
                     :default-checked="checked" disabled :key="Math.random()"  />
                    </a-space>`,
            setup(props: any) {
              const { blueMaterial } = props.params.data
              var checked = blueMaterial > 0 ? true : false
              return {
                blueMaterial,
                checked,
              }
            },
          }
        }
        if (o.slotName === 'rummage') {
          obj['cellRenderer'] = {
            template: `<a-space>
                    <a-checkbox  :value="1" 
                     :default-checked="checked" disabled :key="Math.random()"  />
                    </a-space>`,
            setup(props: any) {
              const { rummage } = props.params.data
              var checked = rummage > 0 ? true : false
              return {
                rummage,
                checked,
              }
            },
          }
        }
        if (o.slotName === 'sealCard') {
          obj['cellRenderer'] = {
            template: `<a-space>
                    <a-checkbox  :value="1" 
                     :default-checked="checked" disabled :key="Math.random()"  />
                    </a-space>`,
            setup(props: any) {
              const { sealCard } = props.params.data
              var checked = sealCard > 0 ? true : false
              return {
                sealCard,
                checked,
              }
            },
          }
        }
        return obj
      })
      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      cfsValue = a.concat(cfsValue)
      const total = ref(10)
      const changePage = (val: any) => {
        pagination.page = val
        doRefresh()
      }
      const changeSize = (val: any) => {
        pagination.pageSize = val
        doRefresh()
      }

      const localeTextData: any = ref(localeText)

      /**
       * 打印
       */
      const vPrintClick = () => {
        printJS({
          printable: 'printCont',
          type: 'html',
          targetStyles: ['*'],
        })
      }
      const selectDate = (date: any) => {
        // console.log(date);
        searchData.startDate = date ? date[0] : ''
        searchData.endDate = date ? date[1] : ''
      }
      return {
        selectHandler,
        addHandler,
        dyBoufeiHandler,
        pagination,
        table,
        rowKey,
        scrollbar,
        tableColumns,
        selectedRowKeys,
        pageData,
        saveHandler,
        dataForm,
        formRef,
        headerShow,
        changePage,
        changeSize,
        localeTextData,
        defaultColDef,
        gridReady,
        cfsValue,
        total,
        changHeadShow,
        searchData,
        vPrintClick,
        selectDate,
        clickOut,
      }
    },
  })
</script>

<style lang="less" scoped>
  .main-container {
    height: 100%;
  }

  .arco-drawer-title {
    width: inherit;
  }

  .arco-drawer-body .arco-scrollbar-track-direction-horizontal {
    display: none;
  }

  .arco-drawer-body .arco-table-container .arco-scrollbar-track-direction-horizontal {
    display: block;
  }

  .bacClass {
    background: #fff;
    width: 220px;
    border: 1px solid #c9cdd3;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
  :deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}
  .printCont {
    text-align: center;

    .Head3 {
      font-size: 25px;
      font-weight: bold;
    }

    .secondTitle {
      display: flex;
      font-size: 18px;
      justify-content: center;
    }

    .headTop {
      margin-top: 20px;
    }

    .mytable {
      width: 100%;

      th,
      td {
        padding: 5px;
        border: 1px solid #e3e3e3;
      }

      td {
        height: 30px;
      }

      th {
        background: rgb(247, 248, 250);
      }
    }
  }


</style>
